import React from "react";
import { Form, Input, Button, DatePicker, Select } from "antd";

const { RangePicker } = DatePicker;
const { Option } = Select;

@Form.create()
class AdvancedFilter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const { getRef } = this.props;
    if (getRef) getRef(this);
  }

  handleReset = () => {
    const { form, handleParamsChange } = this.props;
    form.resetFields();
    handleParamsChange({ modelId: "",modelkey:"",modelName:"",nodeCode:"",nodeName:"",name:"",eventType:"",callMethod:"", timeStart: "", timeEnd: ""});
    // handleSearch();
  };

  setEventsToTemp=()=>{
    const { form,setEventsToTemp } = this.props;  // eslint-disable-line no-unused-vars
    setEventsToTemp();
    this.handleReset();
  }

  handleSubmit = e => {
    if (e && e.preventDefault) e.preventDefault();
    const { form, handleParamsChange, handleSearch } = this.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      const { datatime, modelId,modelName,modelKey, nodename,nodeCode,name,eventType,callMethod } = values;
      const param = { modelId,modelName,modelKey, nodeName:nodename,nodeCode,name,eventType,callMethod};
      if (datatime && datatime.length > 0) {
        param.timeStart = datatime[0].format("YYYY-MM-DD HH:mm:ss");
        param.timeEnd = datatime[1].format("YYYY-MM-DD HH:mm:ss");
      } else {
        param.timeStart = "";
        param.timeEnd = "";
      }
      handleParamsChange(param);
      handleSearch();
    });
  };

  onRangeChange = (dates, dateStrings) => {
    const { handleParamsChange } = this.props;
    const param = { timeStart: dateStrings[0], timeEnd: dateStrings[1] };
    handleParamsChange(param);
  };

  onInputChage = e => {
    const { handleParamsChange } = this.props;
    handleParamsChange({ searchKey: e.target.value });
  };
  

  render() {
    const { form, visible } = this.props;
    const { getFieldDecorator } = form;
    return (
      <div className={`filter__box ${!visible ? "box__hidden" : ""}`}>
        <Form layout="inline">
          <div>
            <Form.Item label="流程名称">
              {getFieldDecorator("modelName", {initialValue: ""})
              (
                <Input
                  placeholder="请输入流程模型名称"
                  style={{ minWidth:150}}
                />,
              )}
            </Form.Item>

            <Form.Item label="流程编码">
              {getFieldDecorator("modelKey", {initialValue: ""})
              (
                <Input
                  placeholder="请输入流程编码"
                  style={{ minWidth:150}}
                />,
              )}
            </Form.Item>

            <Form.Item label="流程实例id">
              {getFieldDecorator("modelId", {initialValue: ""})
              (
                <Input
                  placeholder="请输入流程实例id"
                  style={{ minWidth:150}}
                />,
              )}
            </Form.Item>
            <Form.Item label="事件名称">
              {getFieldDecorator("name", {initialValue: ""})
              (
                <Input
                  placeholder="请输入事件名称"
                  style={{ minWidth:150}}
                />,
              )}
            </Form.Item>
            <Form.Item
              label="创建时间"
              // {...formItemLayout1}
            >
              {getFieldDecorator("datatime", {
                initialValue: "",
              })(
                <RangePicker
                  format="YYYY-MM-DD HH:mm:ss"
                  // className='input__search'
                  onChange={this.onRangeChange}
                  placeholder={["开始时间", "结束时间"]}
                  showTime
                  style={{ maxWidth: 300 }}
                />,
              )}
            </Form.Item>

            <Form.Item label="节点编码">
              {getFieldDecorator("nodeCode", {initialValue: ""})
              (
                <Input
                  placeholder="请输入节点编码"
                  // style={{ minWidth:150}}
                />,
              )}
            </Form.Item>

            <Form.Item label="节点名称">
              {getFieldDecorator("nodename", {initialValue: ""})
              (
                <Input
                  placeholder="请输入节点名称"
                  style={{ minWidth:100}}
                />,
              )}
            </Form.Item>
                      
            <Form.Item label="事件类型">
              {getFieldDecorator(
              "callMethod",
              {},
            )(
              <Select
                placeholder="请选择事件类型"
                style={{ minWidth: 200}}
              >
                <Option value="sync">同步</Option>
                <Option value="async">异步</Option>
                
              </Select>,
            )}
            </Form.Item>
            <Form.Item label="触发时机">
              {getFieldDecorator(
              "eventType",
              {},
            )(
              <Select
                placeholder="请选择触发时机"
                style={{ minWidth: 200}}
              >
                <Option value="TASK_CREATED">流程前置</Option>
                <Option value="TASK_COMPLETED">流程后置</Option>
                
              </Select>,
            )}
            </Form.Item>
            <Button type="primary" onClick={this.handleSubmit}>
              查询
            </Button>
            <Button onClick={this.handleReset}>
              重置
            </Button>
            <Button onClick={this.setEventsToTemp}>
              获取模型最新事件
            </Button>
          </div>
        </Form>
      </div>
    );
  }
}
export default AdvancedFilter;
